<script setup lang='ts'>
import {getNftsingle} from "@/api";
import {onBeforeMount, ref} from "vue";
import {Detail} from "@/api/type";
const data = ref<Detail>({});
const  getData = async  () => {
  const res = await getNftsingle();
  console.log(res,'res');
  if (!res) return;
  data.value = res as Detail;
  //十秒后刷新
  setTimeout(() => {
    getData();
  }, 1000*60);
};
onBeforeMount(async () => {
  //每10秒获取一次数据
    await getData();
});

</script>

<template>
  <div class="overflow-x-hidden container h-screen flex items-center justify-center font-body text-jacarta-500" itemscope
       itemtype="http://schema.org/WebPage">
    <main>
      <!-- Hero Slider -->
      <section class="relative">
        <div class=" justify-center">
          <!-- Item -->
          <div class="flex">
            <!-- Image -->
            <figure class="lg:mb-8 md:w-2/5 flex-shrink-0 flex-grow-0 basis-auto sm:w-2/5 flex items-center justify-center">
              <img
                  :src="data.pic"
                  alt="item"
                  class="cursor-pointer rounded-2.5xl"
                  data-bs-toggle="modal"
                  data-bs-target="#imageModal"
              />
              <!-- Modal -->
              <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog !my-0 flex h-full items-center justify-center p-4">
<!--                  <img src="/img/products/item_single_full.jpg" alt="item"/>-->
                </div>

                <button
                    type="button"
                    class="btn-close absolute top-6 right-6"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                >
                  <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      width="24"
                      height="24"
                      class="h-6 w-6 fill-white"
                  >
                    <path fill="none" d="M0 0h24v24H0z"/>
                    <path
                        d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"
                    />
                  </svg>
                </button>
              </div>
              <!-- end modal -->
            </figure>

            <!-- Details -->
            <div class="md:w-3/5 md:basis-auto md:pl-8 sm:w-2/5 lg:w-1/2 lg:pl-[3.75rem]">
              <!-- Collection / Likes / Actions -->
              <div class="mb-3 sm:mb-1 flex">
                <!-- Collection -->
                <div class="flex items-center">
                  <p class="mr-2 text-sm font-bold text-accent">CryptoGuysNFT</p>
                  <span
                      class="inline-flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-green dark:border-jacarta-600"
                      data-tippy-content="Verified Collection"
                  >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        width="24"
                        height="24"
                        class="h-[.875rem] w-[.875rem] fill-white"
                    >
                      <path fill="none" d="M0 0h24v24H0z"></path>
                      <path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
                    </svg>
                  </span>
                </div>
              </div>

              <h1 class="lg:mb-4 sm:mb-1 font-display sm:text-xl lg:text-4xl font-semibold text-jacarta-700 dark:text-white">{{ data.name }}</h1>

              <div class="lg:mb-8 sm:mb-2 flex items-center space-x-4 whitespace-nowrap">
                <div class="flex items-center">
                  <span class="-ml-1" data-tippy-content="ETH">
                    <svg
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        x="0"
                        y="0"
                        viewBox="0 0 1920 1920"
                        xml:space="preserve"
                        class="mr-1 h-4 w-4"
                    >
                      <path fill="#8A92B2" d="M959.8 80.7L420.1 976.3 959.8 731z"></path>
                      <path fill="#62688F" d="M959.8 731L420.1 976.3l539.7 319.1zm539.8 245.3L959.8 80.7V731z"></path>
                      <path fill="#454A75" d="M959.8 1295.4l539.8-319.1L959.8 731z"></path>
                      <path fill="#8A92B2" d="M420.1 1078.7l539.7 760.6v-441.7z"></path>
                      <path fill="#62688F" d="M959.8 1397.6v441.7l540.1-760.6z"></path>
                    </svg>
                  </span>
                  <span class="text-sm text-base font-medium tracking-tight text-green">{{data.price}} ETH</span>
                </div>
              </div>
              <p class="lg:mb-10 sm:mb-2 dark:text-jacarta-300 lg:line-clamp-none sm:line-clamp-2">
                {{data.intro}}
              </p>

              <!-- Creator / Owner -->
              <div class="lg:mb-8 sm:mb-2 flex flex-wrap">
                <div class="mr-8 sm:mb-1 lg:mb-4 flex">

                  <div class="flex flex-col justify-center">
                    <span class="block text-sm text-jacarta-400 dark:text-white"
                    >Creator <strong>10% royalties</strong></span
                    >
                    <p class="block text-accent">
                      <span class="text-sm font-bold">@{{data.creator}}</span>
                    </p>
                  </div>
                </div>

                <div class="sm:mb-1 lg:mb-4 flex">
                  <div class="flex flex-col justify-center">
                    <span class="block text-sm text-jacarta-400 dark:text-white">Owned by</span>
                    <p class="block text-accent">
                      <span class="text-sm font-bold">@{{data.owner}}</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <!-- end details -->
          </div>
        </div>
      </section>
      <!-- end hero slider -->
    </main>
  </div>
</template>

